<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
	<meta charset="UTF-8">
	<title>CMS系统-广告管理</title>

	<!-- 引入样式 -->
	<link rel="stylesheet" href="../../../../static/css/element.css" th:href="@{/css/element.css}">
	<link rel="stylesheet" href="../../../../static/css/global.css" th:href="@{/css/global.css}">
	<link rel="stylesheet" href="../../../../static/css/main.css" th:href="@{/css/main.css}">
	<link rel="stylesheet" href="../../../../static/css/myelement.css" th:href="@{/css/myelement.css}"/>
	<!-- 引入组件库 -->
	<script src="../../../../static/js/vue.js" th:src="@{/js/vue.js}"></script>
	<script src="../../../../static/js/element.js" th:src="@{/js/element.js}"></script>
	<script src="../../../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
	<script src="../../../../static/js/jquery.nestable.js" th:src="@{/js/jquery.nestable.js}"></script>
</head>
<body>
<div id="app" v-cloak>
	<div class="main-content">
			<div class="page-header">
				<h1 class="page-title">广告管理</h1>
				<div class="z-pop_question">
                    <el-popover
                            ref="popoverq"
                            placement="bottom-start"
                            width="400"
                            trigger="hover">
                        <p class="z-jiao">
						&nbsp;&nbsp;1、广告是前端页面重要的显示内容<br/>
						&nbsp;&nbsp;2、广告可以关联多张图片,可以做轮播或者单独的展示<br/>
						&nbsp;&nbsp;3、广告关联的不同图片，可以设置不同的链接<br/>
						&nbsp;&nbsp;<a href="javascript:;">查看更多帮助</a>
                        </p>
                    </el-popover>

                    <i v-popover:popoverq class="el-icon-question"></i>
                </div>
				<div class="breadcrumb"><a href="javascript: top.location.reload();">首页</a><span>/</span>内容</div>
			</div>

				<div class="list-content">
					<!--条件筛选-->
					<div class="content_item_filter clearfix" :class="[hasfilterMore?'content_filter_more':'']">
					<div class="input-select fl btn-radid_none">
	                    <div class="filter-form filter-form-one clearfix">
	                        <el-input placeholder="广告名" v-model="conditions.name.value" clearable class="minW40 z_input-holder"></el-input>
	                        <el-select placeholder="所属终端" v-model="conditions.releaseTerminal.value" clearable class="z_select-holder">
	                            <el-option label="移动端" value="0">移动端</el-option>
	                            <el-option label="PC端" value="1">PC端 </el-option>
	                        </el-select>
	                    </div>
	                    <div class="filter-operate">
	                        <div class="filter-more" @click="toggleMoreSearch" v-show="hasfilterMore"><i :class="[filterMore?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>
	                        <el-tooltip class="item" content="查询" placement="bottom-start">
	                            <el-button icon="el-icon-search" @click="handleQuery"></el-button>
	                        </el-tooltip>
	                        <el-tooltip class="item" content="清空" placement="bottom-start">
	                            <el-button icon="el-extend-clean" @click="handleClear"></el-button>
	                        </el-tooltip>
	                    </div>
                   </div>
						<div class="filter-btn fr">
							<el-button type="primary" @click="handleAdd">新增广告</el-button>
						</div>
					</div>

					<!--主体表格-->
					<div class="z-tables">
						<el-table ref="multipleTable" :data="advertList" style="width: 100%;">
						    <el-table-column fixed type="index" label="序号" class-name="z-opt_btn"></el-table-column>
							<el-table-column label="广告名" min-width="200">
							  <template slot-scope="scope">
	                            <el-tooltip placement="bottom-start" popper-class="table-tooltip">
	                                <div slot="content">{{ scope.row.name }}</div>
	                                <div class="over-omitted">{{ scope.row.name }}</div>
	                            </el-tooltip>
	                         </template>
							</el-table-column>
							<el-table-column label="所属终端" min-width="100">
							   <template scope="scope">
		                            <span v-if="scope.row.releaseTerminal == '0'">移动端</span>
		                            <span v-if="scope.row.releaseTerminal == '1'">PC端</span>
		                        </template>
							</el-table-column>
							<el-table-column prop="sortValue" label="排序"  min-width="100"></el-table-column>
							<el-table-column prop="createTime" label="发布时间"  min-width="150"></el-table-column>
							<el-table-column label="广告介绍"  min-width="300">
							 <template slot-scope="scope">
							    <el-tooltip placement="bottom-start" popper-class="table-tooltip">
	                                <div slot="content">{{ scope.row.note }}</div>
	                                <div class="over-omitted">{{ scope.row.note }}</div>
	                            </el-tooltip>
	                          </template>
							 </el-table-column>
							<el-table-column fixed="right" label="操作" min-width="140">
								<template slot-scope="scope">
								    <el-button type="text" @click="handleEdit(scope.$position, scope.row)">编辑</el-button>
									<span class="table-spea-line">|</span>
									<el-button type="text" @click="handleDelete(scope.$position, scope.row)">删除</el-button>
								</template>
							</el-table-column>
						</el-table>
					</div>
                    </div>
					<!--分页-->
					<div class="grid-content">
						<div class="bg-purple-light">
							<el-pagination
									@size-change="handleSizeChange"
									@current-change="handleCurrentChange"
									:current-page="currentPage"
									:page-sizes="pageSizeList"
									:page-size="pageSize"
									layout="total, sizes, prev, pager, next"
									:total="totalNum">
							</el-pagination>
						</div>
					</div>
			</div>
			
			<el-dialog :title="openText" :visible.sync="dialogFormVisible">
			<el-form ref="advert-form" :model="advert" :rules="rules" label-width="80px" class="demo-ruleForm">
			    <el-form-item hidden
						label="ID" prop="uuid"> <el-input
						v-model="advert.uuid"></el-input> 
				</el-form-item> 
				<el-form-item label="广告名称" prop="name">
					<el-input v-model="advert.name"></el-input>
				</el-form-item>
				<el-form-item label="所属终端" prop="releaseTerminal"> 
				   <el-radio-group v-model="advert.releaseTerminal"> 
					   <el-radio :label="'0'">移动端</el-radio>
					   <el-radio :label="'1'">PC端</el-radio> 
				   </el-radio-group> 
				</el-form-item>
				<el-form-item label="排序" prop="sortValue"> 
				  <el-input v-model.number="advert.sortValue"></el-input> 
				</el-form-item>
				<el-form-item label="广告介绍" prop="note"> 
					<el-input type="textarea" v-model="advert.note" ></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer" id="addDialog" style="display: none">
				<el-button @click="saveAdvert" type="primary">确定</el-button>
				<el-button @click="dislogHide">取消</el-button>
			</div>
			<div slot="footer" class="dialog-footer" id="editDialog"
					style="display: none">
					<el-button @click="updateAdvert" type="primary">确定</el-button>
					<el-button @click="dislogHide">取消</el-button>
			</div>
		</el-dialog>
			
</div>
<script th:inline="javascript">
    new Vue({
        el: "#app",
        data: {
            advertList: [],
            noticeList:[],
            showChoice: false,
            hasfilterMore: false,  // 列表是否拥有更多筛选条件
            filterMore: false,  // 列表更多筛选条件是否展示
            dialogFormVisible: false,
            openText: '新增广告',
            conditions: {
                "name": {
                    "operation": "LIKE",
                    "value": ""
                },
                "releaseTerminal": {
                    "operation": "EQ",
                    "value": ""
                }
            },
            advert: {},
            rules: {
            	name: [
                       {required: true, message: "请输入广告名", trigger: 'blur'},
                       {max: 20, message: '广告名不能超过10个字符', trigger: 'blur' }
                   ],
                   releaseTerminal: [
                       {required: true, message: "请输入选择所属终端", trigger: 'change'}
                   ],
                   sortValue:[{ type: 'number', message: '排序值必须为数值',trigger: 'blur'}],
                   note:[{ max: 250, message: '广告介绍不能超过250个字符',trigger: 'blur'}]
            },
            pageSizeList: [5, 10, 20, 50],
            totalNum: 0,
            currentPage: 1, //当前页码数
            pageSize: 10,
        },
        created: function() {
            var self = this;
            var queryMessage = {
                "queryPage": self.currentPage,
                "pageShow": self.pageSize,
                "queryParams": self.conditions,
                "sortMap": {
                    "sortValue": "asc"
                }
            };
            $.ajax({
                url: "/backstage/cms/advert/list",
                type: "POST",
                data: JSON.stringify(queryMessage),
                contentType: "application/json;charset=UTF-8",
                dataType: "json",
                success: function(data) {
                    if (data && data.returnCode == "1") {
                        self.advertList = data.returnMessage;
                        self.totalNum = data.pager.totalNum;
                    }
                }
            });
        },
        methods: {
    	    dislogHide: function () {
    	  	      	this.dialogFormVisible = false;
    	  	      },
            handleQuery() {
                this.currentPage = 1;
                this.queryAdvert();
            },
            handleClear() {
                this.conditions.name.value = "";
                this.conditions.releaseTerminal.value = "";
            },
            // 列表筛选项更多操作
            toggleMoreSearch() {
                this.filterMore = !this.filterMore;
            },
            handleSizeChange: function (val) {
                this.pageSize = val;
                this.queryAdvert();
            },
            handleCurrentChange: function (val) {
                this.currentPage = val;
                this.queryAdvert();
            },
            handleCurrentTable: function (val) {
                window.location.href = 'edit.html?no=' + val.no;
            },
            queryAdvert: function() {
                var self = this;
                var queryMessage = {
                    "queryPage": self.currentPage,
                    "pageShow": self.pageSize,
                    "queryParams": self.conditions,
                    "sortMap": {
                        "sortValue": "asc"
                    }
                };
                $.ajax({
                    url: "/backstage/cms/advert/list",
                    type: "POST",
                    data: JSON.stringify(queryMessage),
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    success: function(data) {
                        if (data && data.returnCode == "1") {
                            self.advertList = data.returnMessage;
                            self.totalNum = data.pager.totalNum;
                        }
                    }
                });
            },
            handleAdd() {
            	this.openText = '新增广告';
      	    	$("#addDialog").css('display','block'); 
      	    	$("#editDialog").css('display','none'); 
            	this.advert.uuid = '';
            	this.advert.name = '';
            	this.advert.note = '';
            	this.advert.releaseTerminal = '1';
            	this.advert.sortValue = '';
            	this.dialogFormVisible = true;
            },
            handleEdit(position, row) {
            	this.openText = '编辑广告';
      	    	$("#addDialog").css('display','none'); 
      	    	$("#editDialog").css('display','block'); 
      	    	this.advert = row;
      	    	this.advert.sortValue = parseInt(row.sortValue);
            	this.dialogFormVisible = true;
            },
            saveAdvert: function(){
	            var self = this;
  	            self.$refs['advert-form'].validate((valid) => {
  	                if (valid) {
  	                    $.ajax({
  	                        url: "/backstage/cms/advert/add",
  	                        type: "POST",
  	                        data: JSON.stringify(self.advert),
  	                        contentType: "application/json;charset=UTF-8",
  	                        dataType: "json",
  	                        success: function(data) {
  	                            if (data && data.returnCode == "1") {
                                      self.$message({
                                          message: '新增广告成功',
                                          type: 'success',
                                          duration: 1000,
                                          customClass: 'message-center',
                                          onClose: function () {
                                              window.location.href = '/backstage/cms/advert/tolist';
                                          }
                                      });
  	                            } else {
  	                                self.$message({
  	                                        message: '新增广告失败',
  	                                        type: 'error',
  	                                        duration: 1000,
  	                                        customClass: 'message-center',
  	                                        onClose: function () {
  	                                            window.location.href = '/backstage/cms/advert/tolist';
  	                                        }
  	                                    });
  	                            }
  	                        }
  	                    });
  	                }
  	            });
            },
           updateAdvert: function() {
 	            var self = this;
  	            self.$refs['advert-form'].validate((valid) => {
  	                if (valid) {
  	                    $.ajax({
  	                        url: "/backstage/cms/advert/edit",
  	                        type: "POST",
  	                        data: JSON.stringify(self.advert),
  	                        contentType: "application/json;charset=UTF-8",
  	                        dataType: "json",
  	                        success: function(data) {
  	                            if (data && data.returnCode == "1") {
                                      self.$message({
                                          message: '编辑广告成功',
                                          type: 'success',
                                          duration: 1000,
                                          customClass: 'message-center',
                                          onClose: function () {
                                              window.location.href = '/backstage/cms/advert/tolist';
                                          }
                                      });
  	                            } else {
                                      self.$message({
                                          message: '编辑广告失败',
                                          type: 'error',
                                          duration: 1000,
                                          customClass: 'message-center',
                                          onClose: function () {
                                              window.location.href = '/backstage/cms/advert/tolist';
                                          }
                                      });
  	                            }
  	                        }
  	                    });
  	                }
  	            });
            },
            handleDelete(position, row) {
                var self = this;
                self.$confirm('确认要删除此广告?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(_ => {
                    $.ajax({
                    url: "/backstage/cms/advert/delete",
                    type: "POST",
                    data: JSON.stringify([row.uuid]),
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    success: function (data) {
                        if (data && data.returnCode == "1") {
                        	self.$message({
                        		 message: '删除成功',
                                 type: 'success',
                                 duration: 1000,
                                 customClass: 'message-center',
                                 onClose: function () {
                                     window.location.href = '/backstage/cms/advert/tolist';
                                 }
                             });
                        } else {
                        	self.$message({
                       		 message: '删除失败',
                                type: 'error',
                                duration: 1000,
                                customClass: 'message-center',
                                onClose: function () {
                                    window.location.href = '/backstage/cms/advert/tolist';
                                }
                            });
                        }
                    }
                });
            })
            }
        }
    });
</script>
</body>
</html>